<script lang='ts' setup name='Wacth2'>  
 import { ref ,reactive,computed ,watch } from 'vue' 
   const person= ref({
    name:'张三',
    age:18
   })


  //  const person2= reactive({
  //   name:'张三',
  //   age:18
  //  })

  //  console.log("person2",person2)
     // 方法
  function changeName(){
    person.value.name += '~'
  }
  function changeAge(){
    person.value.age += 1
  }

  function changePerson(){
    person.value = {name:'李四',age:90}
  }
  watch(person,(newValue,oldValue)=>{
    console.log('person变化了',newValue,oldValue)
  },{
    deep:true,
    immediate:true,
    // once:true
  })


  //shutdown immediate 立即关机的

</script>  
  
<template>  
  
  <div class="person">
    <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
   <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
     <button @click="changePerson">修改整个人</button>
  </div>
  
</template>  
  
<style scoped>  

</style>  




